<template>
  <el-row class="flex-box" type="flex" ref="flexbox">
    <template v-for="(item, index) in $slots.default || []">
      <el-col
        :span="6"
        :key="index"
        v-if="index < (isExpand ? getDefaultSlotCompomentList.length : 3)"
      >
        <RenderVnode :vnode="item" />
        <!-- <slot :name="'filter-item-' + index" /> -->
      </el-col>
    </template>
    <el-col :span="menuWidth" class="search-box" v-if="hasSearch">
      <el-row type="flex" align="middle">
        <el-button
          class="search-btn"
          type="default"
          :plain="true"
          :size="defaultFormItemSize"
          @click="search"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          v-if="hasReset"
          type="default"
          :plain="true"
          :size="defaultFormItemSize"
          @click="reset"
          style="width: 72px"
          >重置</el-button
        >
        <el-row
          v-if="getDefaultSlotCompomentList.length > 3 && $slots.operation == null"
          type="flex"
          align="middle"
          class="expand-btn"
          @click.native="
            () => {
              isExpand = !isExpand;
            }
          "
        >
          <span style="margin-right: 4px; font-size: 14px">
            {{ isExpand ? '收起' : '展开' }}
          </span>
          <i :class="isExpand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
        </el-row>
        <div v-if="$slots.operation" style="flex-grow: 1; min-width: 10px" />
        <slot name="operation" />
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import RenderVnode from './RenderVnode.vue';

export default {
  name: 'FilterBox',
  props: {
    hasSearch: {
      type: Boolean,
      default: true
    },
    hasReset: {
      type: Boolean,
      default: true
    }
  },
  components: {
    RenderVnode
  },
  data() {
    return {
      isExpand: false
    };
  },
  computed: {
    getDefaultSlotCompomentList() {
      console.log(this.$slots);
      let temp = [];
      Object.keys(this.$slots).forEach(key => {
        if (key.startsWith('filter-item-')) {
          temp.push(key);
        }
      });
      return temp;
    },
    menuWidth() {
      if (this.isExpand) {
        // 展开的时候
        let temp = this.getDefaultSlotCompomentList.length % 4;
        if (temp === 0) {
          return 24;
        } else {
          return (4 - temp) * 6;
        }
      } else {
        // 收起的时候
        if (this.getDefaultSlotCompomentList.length <= 3) {
          return (4 - this.getDefaultSlotCompomentList.length) * 6;
        } else {
          return 6; // 如果超过3个，默认宽度为6
        }
      }
    }
  },
  beforeCreate() {
    (this.$slots.default || []).forEach((slot, index) => {
      this.$slots['filter-item-' + index] = [slot];
    });
    console.log('FilterBox beforeCreate', this.$slots);
  },
  mounted() {
    if (this.$slots.operation) {
      this.isExpand = true; // 如果有操作按钮，默认展开
    }
  },
  methods: {
    search() {
      this.$emit('search');
    },
    reset() {
      this.$emit('reset');
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/style/element-variables.scss';
.flex-box {
  margin-bottom: 16px;
  background-color: white;
  padding: 16px 24px 0px;
  .search-btn {
    color: $--color-primary;
    border-color: $--color-primary;
    &:hover {
      background-color: $--color-primary-light-9;
    }
  }
  ::v-deep .el-form-item {
    margin-bottom: 16px;
    margin-right: 8px;
  }
  .extend-box {
    img {
      cursor: pointer;
      margin-left: 8px;
    }
  }
  .search-box {
    padding-left: 8px;
    margin-bottom: 16px;
    flex-grow: 1;
    flex-shrink: 0;
  }
}
.expand-btn {
  display: inline-flex;
  margin-left: 20px;
  font-size: 16px;
  color: $--color-primary;
  cursor: pointer;
}
</style>
